$size-unit: var(--ctr-size-unit, 8px);
$spacing-unit: var(--ctr-spacing-unit, 8px);
$corner-radius-unit: var(--ctr-corner-radius-unit, 8px);
$stroke-unit: Max(var(--ctr-stroke-unit, 1px), 1px);
$font-unit: var(--ctr-font-unit, 8px);
$line-height-unit: var(--ctr-line-height-unit, 8px);
$ctr-font-family: var(--ctr-font-family, var(--sjs-font-family, var(--font-family)));

@mixin ctrLargeFont {
  font-family: $ctr-font-family;
  font-size: var(--ctr-font-large-size, var(--sjs-font-size-x4));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-large-line-height, var(--sjs-line-height-x5));
}

@mixin ctrLargeBoldFont {
  @include ctrLargeFont;
  font-weight: 700;
}

@mixin ctrMediumFont {
  font-family: $ctr-font-family;
  font-size: var(--ctr-font-medium-size, var(--sjs-font-size-x3));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-medium-line-height, var(--sjs-line-height-x4));
}

@mixin ctrMediumBoldFont {
  @include ctrMediumFont;
  font-weight: 700;
}

@mixin ctrDefaultFont {
  font-family: $ctr-font-family;
  font-size: var(--ctr-font-default-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-default-line-height, var(--sjs-line-height-x3));
}

@mixin ctrDefaultBoldFont {
  @include ctrDefaultFont;
  font-weight: 600;
}

@mixin ctrDefaultBoldUnderlineFont {
  @include ctrDefaultBoldFont;
  font-weight: 600;
  text-decoration-line: underline;
}

@mixin ctrDefaultUnderlineFont {
  @include ctrDefaultFont;
  text-decoration-line: underline;
}

@mixin ctrDefaultAllCapsFont {
  @include ctrDefaultFont;
  font-weight: 600;
  line-height: var(--ctr-font-default-line-height-all-caps, var(--sjs-line-height-x2));
  text-transform: uppercase;
}

@mixin ctrSmallFont {
  font-family: $ctr-font-family;
  font-size: var(--ctr-font-small-size, var(--sjs-font-size-x150));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-small-line-height, var(--sjs-line-height-x2));
}

@mixin ctrSmallBoldFont {
  @include ctrSmallFont;
  font-weight: 600;
}

@mixin ctrSmallUnderlineFont {
  @include ctrSmallFont;
  text-decoration-line: underline;
}

@mixin ctrSmallAllCapsFont {
  @include ctrSmallFont;
  font-weight: 700;
  text-transform: uppercase;
}

@mixin ctrCodeFont {
  font-family: var(--ctr-font-family-code, monospace);
  font-size: var(--ctr-font-code-size, var(--sjs-font-size-x2));
  font-style: normal;
  font-weight: 400;
  line-height: var(--ctr-font-code-line-height, var(--sjs-line-height-x3));
}